// 原版
// const div = document.createElement('div');
// const p = document.createElement('p');
// const span = document.createElement('span');
// div.appendChild(p);
// div.appendChild(span);
// span.innerText = '我是一个span';
// document.body.appendChild(div);

// 第一次优化--创建函数
// const div = createElement('div');
// const p = createElement('p');
// const span = createElement('span');
// div.appendChild(p);
// div.appendChild(span);
// span.innerText = '我是一个span';
// document.body.appendChild(div);

// function createElement(tagName) {
//   return document.createElement(tagName);
// }

// 第二次优化--接收子函数
// const div = createElement('div');
// const p = createElement('p');
// const span = createElement('span');
// div.appendChild(p);
// div.appendChild(span);
// span.innerText = '我是一个span';
// document.body.appendChild(div);

// function createElement(tagName, children) {
//   const element = document.createElement(tagName);
//   if (children) {
//     element.appendChild(children)
//   }
//   return element;
// }

// 第三次优化--接收并返回子函数
const div = createElement('div', createElement('p', createElement('span', 'hi')));
document.body.appendChild(div);

function createElement(tagName, children) {
  const element = document.createElement(tagName);
  if (children) {  // 接收一个元素，不接收字符串
    if (typeof children === 'string') {
      var childElement = document.createTextNode(children); // 创建一个文本节点
      element.appendChild(childElement);
    } else {
      element.appendChild(children);
    }
  }
  return element;
}

// 第四次优化
const div = (
  t('div',
    t('p',
      t('span', 'hi')))
);
document.body.appendChild(div);

function t(tagName, children) {
  const element = document.createElement(tagName);
  if (children) {  // 接收一个元素，不接收字符串
    if (typeof children === 'string') {
      var childElement = document.createTextNode(children); // 创建一个文本节点
      element.appendChild(childElement);
    } else {
      element.appendChild(children);
    }
  }
  return element;
}

// react原理
import React from 'react'
import ReactDOM from 'react-dom'
// 利用createElement方法创建一个虚拟的div
const div = (
  React.createElement('div', null,
    React.createElement('p', null,
      React.createElement('span', null, 'hi')))
);

console.log(div);  // 不是element 而是虚拟的element--就是一个对象
// document.body.appendChild(div)  // 会提示这个参数不是一个节点，而是一个假的节点--虚拟dom

// 用render方法挂载到body下面 public目录下的html文件有root这个id属性
ReactDOM.render(div, document.getElementById('root'));
